<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input v-model="query.storeName" clearable placeholder="输入商铺名称" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <el-select v-model="query.status" clearable placeholder="选择审核状态" class="filter-item" style="width: 130px">
        <el-option v-for="item in checkStatus" :key="item.index" :label="item.label" :value="item.index" />
      </el-select>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <!-- 新增 -->
      <div style="display: inline-block;margin: 0px 2px;">
        <el-button
          type="danger"
          class="filter-item"
          size="mini"
          icon="el-icon-refresh"
          @click="toQuery"
        >刷新</el-button>
         <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="toAddURL"
        >
            新增
        </el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" style="width: 100%">
      <el-table-column prop="merName" label="商铺名称" width="120" />
      <el-table-column prop="merAddr" label="地址" width="120" />
      <el-table-column prop="mobile" label="手机号" width="120" />
      <el-table-column prop="provinceName" label="省份" width="120" />
      <el-table-column prop="cityName" label="城市" width="120"/>
       <el-table-column prop="areaName" label="区县" width="120"/>
         <el-table-column prop="cateName" label="类别" width="120" />
      <el-table-column prop="userName" label="申请人" width="120"/>
      <el-table-column prop="createTime" label="申请时间" width="120" />
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0"  :type="''">待审核</el-tag>
            <el-tag v-if="scope.row.status == 1"  :type=" 'info' ">审核通过</el-tag>
            <el-tag v-if="scope.row.status == 2"  :type=" 'danger' ">审核未通过</el-tag>
        </template>
      </el-table-column>

       <el-table-column label="启/禁用" align="center" >
        <template slot-scope="scope" >
          <el-switch
            class="switch-text"
            v-model='scope.row.isShow'
            active-text="禁用"
            inactive-text="启用" :active-value="1" :inactive-value="0"   active-color="#ff4949"
            inactive-color="#13ce66" disabled>
      </el-switch>
</template>
      </el-table-column>
      <el-table-column label="操作" width="300px" align="center" fixed="right" >
        <template slot-scope="scope">
           <el-button
            size="mini"
            type="success"
             icon="el-icon-edit"
            @click="toUpdate(scope.row.merId)"
         
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-edit-outline"
            @click="toUpdateURL(scope.row.merId)"
            v-if="scope.row.status=='0'"
          >
            审核
          </el-button>
          <el-button  v-if= "scope.row.status!='0'" slot="reference" type="primary" icon="el-icon-set-up" size="mini" @click="subDetail(scope.row.merId)">详情</el-button>
          <el-button  v-if= "scope.row.status=='1'&&scope.row.isShow=='0'" slot="reference" type="danger" icon="el-icon-warning" size="mini" @click="changeIsShow(scope.row,scope.$index)">禁用</el-button>
          <el-button v-if= "scope.row.status=='1'&&scope.row.isShow=='1'"  slot="reference" type="danger" icon="el-icon-success" size="mini" @click="changeIsShow(scope.row,scope.$index)">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>
<script>
import initData from "@/mixins/crud";
import { onOrOff } from "@/api/spManage";
export default {
  mixins: [initData],
  data() {
    return {
      dropDownValue: "",
      optionsMetaShow: [],
      delLoading: false,
      visible: false,
      queryTypeOptions: [{ key: "merName", display_name: "商铺名称" }],
      checkStatus: [
        { index: "", label: "全部" },
        { index: "0", label: "待审核" },
        { index: "1", label: "审核通过" },
        { index: "2", label: "审核未通过" },
      ],
      isAttr: false,
      cateId: null,
    };
  },
  created() {
    this.$nextTick(() => {
      this.init().then(() => {
        this.optionsMetaShow = this.cateList;
      });
    });
  },
  methods: {
    //新增商铺
    toAddURL() {
      this.$router.push({
        path: "/spManage/spAdd",
        query: { identNumber: "1" },
      });
    },
    //审核商铺
    toUpdateURL(id) {
      this.$router.push({
        path: "/spManage/spCheck/" + id,
        query: { identNumber: "2" },
      });
    },
    //商铺详情
    subDetail(id) {
      this.$router.push({
        path: "/spManage/spDetail/" + id,
        query: { identNumber: "3" },
      });
    },
    //编辑商铺
    toUpdate(id) {
      this.$router.push({
        path: "/spManage/spUpdate/" + id,
        query: { identNumber: "4" },
      });
    },
    //禁启用切换
    changeIsShow(e, index) {
      if (e.isShow == 0) {
        this.$confirm("是否禁用", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            onOrOff({ merId: e.merId, isShow: 1 }).then(res => {
              e.isShow = res;
            });
          })
          .catch(() => {});
      } else {
        this.$confirm("是否启用", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          onOrOff({ merId: e.merId, isShow: 0 }).then(res => {
            e.isShow = res;
          });
        });
      }
    },
    //初始化列表
    beforeInit() {
      this.url = "api/shStore/list";
      this.params = {
        page: this.page + 1,
        size: this.size,
      };
      const query = this.query;
      const status = query.status;
      const storeName = query.storeName;
      if (status && storeName) {
        this.params[status] = storeName;
      }
      return true;
    },
  },
};
</script>

<style scoped lang="stylus">
/deep/ .switch-text .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}

// 打开时文字位置设置
/deep/ .switch-text .el-switch__label--right {
  z-index: 1;
  // right: -3px;
}

/* 关闭时文字位置设置 */
/deep/ .switch-text .el-switch__label--left {
  z-index: 1;
  left: 20px;
}

/* 显示文字 */
/deep/ .switch-text .el-switch__label.is-active {
  display: block;
}

/deep/ .switch-text.el-switch .el-switch__core, .el-switch .el-switch__label {
  width: 58px !important;
  padding-left: 5px;
  font-size: 12px;
}
</style>
